<template>
  <div>
    <div class="box">
      <div class="topBar">
        <el-form ref="queryForm" :model="queryForm" :inline="true" label-width="120px">
          <el-form-item label="客户资质：" prop="wihteOrBlack">
            <el-select v-model="queryForm.wihteOrBlack" placeholder="请选择">
              <el-option
                v-for="item in wihteOrBlackList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="纳入时间：" prop="timeOfInvlusion">
            <el-date-picker
              v-model="queryForm.timeOfInvlusion"
              type="daterange"
              value-format="yyyyMMdd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-form>
        <div>
          <el-row>
            <el-col :span="8" style="text-align: right; float: right">
              <el-button type="primary" @click="getData" class="gray-btn">查询</el-button>
              <el-button type="primary" @click="resetFrom" class="btn">重置</el-button>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="bottomInfo">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="txnOppoNm" label="交易对手"> </el-table-column>
          <el-table-column prop="txnOppoId" label="交易对手ID"> </el-table-column>
          <el-table-column prop="txnId" label="交易编号"> </el-table-column>
          <el-table-column prop="txnBizType" label="交易品种"> </el-table-column>
          <el-table-column prop="txnAmt" label="交易金额" width="200px">
            <template slot-scope="scope">
              {{
                Number(scope.row.txnAmt).toLocaleString("en-US", {
                  style: "decimal",
                  minimumFractionDigits: 0,
                  maximumFractionDigits: 4,
                })
              }}
            </template>
          </el-table-column>
          <el-table-column prop="trader" label="我方交易员"> </el-table-column>
          <el-table-column prop="txnDt" label="交易日期"> </el-table-column>
          <!-- <el-table-column prop="txnTm" label="交易时间"> </el-table-column> -->
          <el-table-column prop="wihteOrBlack" label="资质类型"> </el-table-column>
          <el-table-column prop="timeOfInvlusion" label="纳入时间"> </el-table-column>
          <el-table-column prop="reasonOfSuspension" label="暂停原因"> </el-table-column>
          <el-table-column prop="suspensionOfBusiness" label="暂停业务品种">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageFn"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getList } from "@/api/customerManagement/transactionMonitoring";
export default {
  data() {
    return {
      queryForm: {
        wihteOrBlack: "黑名单",
      },
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      wihteOrBlackList: [
        {
          label: "黑名单",
          value: "黑名单",
        },
        {
          label: "白名单",
          value: "白名单",
        },
        {
          label: "无资质",
          value: "无资质",
        },
        // {
        //   label: "全部",
        //   value: "",
        // },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    resetFrom() {
      this.$refs.queryForm.resetFields();
      this.pageNum = 1;
      this.pageSize = 10;
      this.getData();
    },
    complexUniqueArray(arr) {
      const seen = new Map();
      return arr.filter((item) => {
        const isObject = typeof item === "object" && item !== null;
        const key = isObject ? JSON.stringify(item) : item;

        if (seen.has(key)) {
          return false;
        } else {
          seen.set(key, true);
          return true;
        }
      });
    },
    getData() {
      try {
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...this.queryForm,
        };

        if (params.timeOfInvlusion && params.timeOfInvlusion.length > 0) {
          params.timeOfInvlusionBegin = params.timeOfInvlusion[0];
          params.timeOfInvlusionEnd = params.timeOfInvlusion[1];
        }
        delete params.timeOfInvlusion;
        Object.keys(params).forEach((item) => {
          if (!params[item] || params[item] == "") {
            delete params[item];
          }
        });
        getList(params).then((res) => {
          console.log(res);
          if (res) {
            let arr = res.data.records;
            this.tableData = this.complexUniqueArray(arr);
            this.pageNum = res.data.current;
            this.pageSize = res.data.size;
            this.total = res.data.total;
          }
        });
        // console.log(res);
      } catch (error) {}
    },

    pageFn(num) {
      this.pageNum = num;
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .bottomInfo {
    flex: 1;
    width: 100%;
    background-color: #262d47;
    padding-bottom: 20px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }

  .el-table {
    min-height: 440px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
.update_text {
  color: #fff;
  text-align: right;
  margin: 10px 10px 10px 0px;
}
::v-deep {
  .el-dialog {
    .el-icon-date {
      height: 30px !important;
      line-height: 30px !important;
    }
    .el-range-separator {
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      z-index: 10;
    }
    .el-input__inner {
      border: 1px solid rgba(126, 163, 255, 0.3) !important;
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      .el-range-input {
        background-color: #363657 !important;
        height: 28px !important;
        line-height: 28px !important;
      }
    }
  }
}
</style>
